<template>
	<view class="reseller">
		<view class="top">
			<view class="num1" @click="tohsbz()">
				<view class="balance">
					<text>当前余额</text>
					<image :src='this.commonImg() + "tishi.png"'></image>
				</view>
				<view style="font-size: 58rpx;">{{balance}}</view>
			</view>

			<view class="tixian" @click="jump_cash">
				<view class="btn">立即提现</view>
			</view>
		</view>

		<view class="icon">
			<view class="ico" v-for="item of list" @click="toUrl(item.url)">
				<view class="tubiao">
					<image class="img" :src="item.img"></image>
				</view>
				<view class="tt">
					<view class="text">{{item.title}}</view>
				</view>
			</view>

		</view>
		<view class="kong"></view>

		<!-- 回收标准弹框 -->
		<view class="modal-mask" catchtouchmove="preventTouchMove" v-if="isHsbz"></view>
		<view class="modal-dialog" v-if="isHsbz">
			<view class="modal-content">
				<image @tap="toclose()" class="close" :src='this.commonImg() + "close.png"'></image>
				<view class="title">余额说明</view>
				<view>
					<p>1.余额分为<text>余额</text>和<text>可提现余额</text>；</p>
					<p>2.<text>余额：</text>当用户回收后，订单到达仓库前，我们的奖励金额会显示为余额，不可以提现；</p>
					<p>3.<text>可提现余额：</text>用户回收订单在仓库签收并确认无异常后，奖励金额状态会显示在可提现余额，可直接提现中微信钱包；</p>
					<p>4.每天累计最高可提现<text style="color: #e3595a;">200</text>元，每月最多可提现金额<text
							style="color: #e3595a;">600</text>元；</p>
					<p>5.如有问题可联系在线客服为您解答。</p>
				</view>
				<button @tap="toclose()">
					好的
				</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					title: '余额明细',
					img: require("@/static/img/fx3.png"),
					url: "/pages/user/distribution/mingxi?status=0"
				}, ],
				balance: '0.00',
				earnings: '0.00',
				isHsbz: false,
				id: 0
			}
		},
		onShow() {
			this.$api.http.get('user-info', {}).then(res => {
				this.balance = res.data.member.price
				this.id = res.data.member.id
			})
		},
		components: {},
		methods: {
			toclose() {
				this.isHsbz = false
			},
			tohsbz() {
				this.isHsbz = true
			},
			jump_cash() {
				let arr = [24261, 70116, 69758,  23677, 63491, 51895, 52679, 22808, 93278,144253,144261]
				let includesObject = arr.includes(this.id)
				if (includesObject) {
					this.$api.msg("暂不可提现");
				} else {
					uni.navigateTo({
						url: '/pages/user/distribution/tixian'
					})
				}


			},
			toUrl(url) {
				uni.navigateTo({
					url: url
				})
			}
		},
		onPullDownRefresh() {
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 2000);
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F5F5F5;
	}

	.reseller {
		background-color: #F5F5F5;
		min-height: 100vh;
		font-size: 14px;

		.top {
			color: #FFFFFF;
			display: flex;
			justify-content: space-between;
			position: relative;
			width: 94%;
			height: 200px;
			background: linear-gradient(135deg, #0fD0C3, #3ebcc5);
			margin: 20px 3% 0;
			border-radius: 5px;

			.title {
				background-color: #FFFFFF
			}

			.num1 {
				margin-top: 10%;
				text-align: center;
				width: 100%;
				font-size: 30upx;

				.balance {
					display: flex;
					align-items: center;
					justify-content: center;

					image {
						width: 28rpx;
						height: 28rpx;
						margin-left: 10rpx;
					}
				}
			}

		}

		.tixian {
			display: flex;
			justify-content: center;
			background-color: #F5F5F5;
			width: 55%;
			height: 60px;
			border-radius: 60px;
			position: absolute;
			bottom: -30px;
			left: 23%;
			font-size: 30rpx;

			.btn {
				margin-top: 7%;
				text-align: center;
				width: 85%;
				background-color: #3cbdc5;
				height: 40px;
				border: none;
				border-radius: 50px;
				line-height: 40px;
				color: #FFFFFF;
			}


		}

		.icon {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;

			margin-left: 3%;
			margin-right: 3%;
			margin-top: 100rpx;

			.ico {
				border-radius: 5px;
				width: 94%;
				padding: 30rpx 3%;
				display: flex;
				border: none;
				font-size: 15px;
				align-items: center;
				background-color: #FFFFFF;

				.img {
					width: 22px;
					height: 22px;
					display: block;
				}

				.tubiao {
					text-align: center;
					margin-right: 20rpx;
				}

				.text {
					color: #8F8F94;
					text-align: center;
					font-size: 28upx;

				}
			}
		}

		.kong {
			height: 100px;
		}
	}

	/* ---弹窗css--- */
	.modal-mask {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background: #000;
		opacity: 0.5;
		overflow: hidden;
		color: #fff;
		z-index: 998;
	}

	.modal-dialog {
		width: 72%;
		position: fixed;
		top: 15%;
		left: 14%;
		background: #fff;
		border-radius: 12rpx;
		z-index: 999;
	}

	.modal-content {
		line-height: 40rpx;
		padding: 40rpx 30rpx;
		position: relative;

		.close {
			width: 24rpx;
			height: 24rpx;
			position: absolute;
			right: 30rpx;
			top: 48rpx;
		}

		.code {
			width: 100%;
		}

		.tishi {
			font-size: 28rpx;
			text-align: center;
		}

		.title {
			display: block;
			font-weight: bold;
			font-size: 30rpx;
			text-align: center;
			margin-bottom: 30rpx;
		}

		.show {
			width: 300rpx;
			height: 105rpx;
			display: block;
			margin: 50rpx auto 30rpx;
			z-index: 10000;
		}

		view {
			font-size: 26rpx;
			color: #333333;
			margin-bottom: 80rpx;
		}

		p {
			margin-bottom: 10rpx;

			text {
				font-weight: bold;
			}
		}

		button {
			width: 100%;
			height: 75rpx;
			border-radius: 10rpx;
			margin: 36rpx auto 0;
			font-size: 28rpx;
			color: #fff;
			background: #4772ed;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			padding: 0;
			box-sizing: border-box;
		}
	}
</style>